<template>
    <div class="page-partner-apply-rate">
        <div class="inner text-normal" v-if="application">
            <div class="item">
                申请状态：<span :style="{ 'color': statusColorMap[application.status] }">{{statusTextMap[application.status]}}</span>
            </div>
            <div class="item" style="margin-top: 12rpx;" v-if="application.reason && application.status === 'fail'">
                拒绝理由：{{application.reason}}
            </div>
        </div>
        <div class="btn-wrap" v-if="application && application.status === 'fail'">
            <div class="btn btn-mobile btn-blue btn-large btn-ract btn-block" :class="{ 'disabled': application && application.status === 'init'}" @click="onClickApply">
                重新申请
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import store from '@/store';
import { Route } from 'vue-router';
import { api } from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'PartnerApplyRate',
})
export default class PartnerApplyRate extends Vue {
    public statusTextMap: any = {
        init: '审核中',
        pass: '已通过',
        fail: '未通过',
    };

    public statusColorMap: any = {
        init: '#63ACFA',
        pass: '#65C77C',
        fail: '#FF3939',
    };

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    /** 服务信息 */
    public get service() {
        return store.state.utils.service;
    }

    public get application() {
        return store.state.user.application;
    }

    public onClickApply() {
        if (this.application && (this.application.status !== 'fail')) {
            return;
        }
        // wx.navigateTo({
        //     url: '/pages/partner_apply/main',
        // });

        api.push({
            name: ROUTE_NAME.PARTNER_APPLY,
        });
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('user/getApplication');
        store.commit('utils/endRequest');
        next();
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";
.page-partner-apply-rate {
    box-sizing: border-box;
    height: 100%;
    padding: 10px 34rpx;
    background-color: #f4f4f4;
    .inner {
        padding: 30rpx 50rpx;
        border-radius: 5px;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0);
        background-color: #ffffff;
    }
    .btn-wrap {
        box-sizing: border-box;
        width: 100%;
        margin-top: 60rpx;
        .btn {
            border-radius: 10rpx;
        }
    }
}

</style>
